<template>
        <PlayGround v-if="$store.state.pk.status === 'playing'" />
        <MatchGround v-if="$store.state.pk.status === 'matching'" />
        <!-- 注意,在模板中(即<template>里面)引用全局变量要用$,在script中不用加 -->
        <ResultBoard v-if="$store.state.pk.loser != 'none'" />
</template>

    
<script>
    import PlayGround from "@/components/PlayGround.vue"
    import { onMounted, onUnmounted } from "vue";
    //onMounted: 当组件被挂载完成后执行的函数;onUnmonted: 当组件被卸载的时候执行的函数
    import { useStore } from "vuex" //引入全局变量
    import MatchGround from '../../components/MatchGround.vue'
    import ResultBoard from '../../components/ResultBoard.vue'
    
    export default {
        components: {
            MatchGround,
            PlayGround,
            ResultBoard,
        },
        setup() {
            const store = useStore();//拿出全局变量
            //字符串中有${}表达式操作的话要用``，不能用引号（这里是测试用，所以先不传token，传id）
            const socketUrl = `ws://127.0.0.1:3029/websocket/${store.state.user.token}/`;
            
            store.commit("updateLoser","none");//一局游戏开始前，清空失败者（否则重新开始游戏时，可能有遗留上一局的结果界面）
            store.commit("updateIsRecord",false);//设定当前是要搞游戏，区别于搞录像
            let socket = null;
            onMounted(() => { //当当前页面打开时调用（实际是当前组件被挂载完成后调用）
                
                //调试用：此时未完成匹配功能，暂时自己搞一个默认的对手信息
                store.commit("updateOpponent",{
                    username: "我的对手",
                    photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png"
                    // photo: "https://ts1.cn.mm.bing.net/th/id/R-C.d0b4575b4afe749d07fdc60de9e899d6?rik=qB4Hjjq7IEIr2Q&riu=http%3a%2f%2fupload.taihainet.com%2f2016%2f0924%2f1474726868882.jpeg&ehk=ePw2Jq8Dq3kncd1HUoFCs09yIZMEVwOiAktMi5mxRyc%3d&risl=&pid=ImgRaw&r=0"
                })
                socket = new WebSocket(socketUrl); //js自带的WebSocket()
                socket.onopen = () => { //连接成功时调用的函数
                    console.log("connected!");
                    store.commit("updateSocket",socket);//链接一成功，就把链接存到全局变量里面
                }
    
                socket.onmessage = msg => { //前端接收到信息时调用的函数，msg是后端传来的数据
                    const data = JSON.parse(msg.data); //拿到数据（不同的框架数据定义的格式不一样）
                    if (data.event === "start-matching") { //这个这个start-matching是respA或respB返回的
                    //匹配成功,更新对手信息
                        store.commit("updateOpponent",{
                            username: data.opponent_username,
                            photo: data.opponent_photo,
                            });
                        setTimeout(() => {//等两秒，再跳转
                            store.commit("updateStatus","playing");//匹配完成后自动跳转到pk界面
                        },200); //延时函数，单位是毫秒
                        // store.commit("updateGamemap",data.gamemap);//此时收到从后端来的地图，要把它存入全局变量
                        // console.log(data.game)
                        store.commit("updateGame",data.game)//此时收到从后端来的地图，要把它存入全局变量
                        }else if (data.event === "move") {//如果后端发来的信息类型是move
                            console.log(data);
                            const game = store.state.pk.gameObject;//把GameMap.js对象从全局变量中取出来
                            const [snake0, snake1] = game.snakes;//获取该对象中的两条蛇参数。
                            snake0.set_direction(data.a_direction);//从收到的信息中，设置两条蛇的方向
                            snake1.set_direction(data.b_direction);//修改全局变量的成员变量，不需要调用全局修改函数

                        } else if (data.event === "result") {
                            console.log(data);
                            const game = store.state.pk.gameObject;
                            const [snake0, snake1] = game.snakes;

                            if (data.loser === "all" || data.loser === "A") {//平局或A输的时候，改变A的状态（就是死了变白）
                                snake0.status = "die";
                            }
                            if (data.loser === "all" || data.loser === "B") {//平局或B输的时候，改变A的状态（就是死了变白）
                                snake1.status = "die";
                            }
                            store.commit("updateLoser", data.loser);//更是失败者
                        }
                }
    
                socket.onclose = () => { //链接断开时调用的函数
                    store.commit("updateStatus", "matching");//链接断开时，匹配也自动断开，重回匹配页面
                    console.log("disconnected!");
                }
            });
    
            onUnmounted(() => { //当当前页面关闭时调用
                socket.close(); //卸载的时候断开连接，实际在这里调用了上面onclose后面的函数
                //注意一定要手动断开链接，否则会一直创建新连接
            });
        }
    }
    
    
</script>
    
    
<style scoped>
</style>
    